<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { CreateElement } from 'vue'

@Component({
  name: 'RenderInput'
})
export default class extends Vue {
  @Prop({ type: [String, Number] })
  private value!: string | number

  render (h: CreateElement) {
    return h(
      'el-input',
      {
        attrs: {
          step: this.$attrs.type === 'number' ? 'any' : null,
          ...this.$attrs
        },
        props: { ...this.$attrs, value: this.value },
        on: {
          ...this.$listeners,
          change: (v: string) => {
            if (this.$attrs.type === 'number' && !isNaN(parseFloat(v))) {
              this.$emit('input', parseFloat(v))
            } else {
              this.$emit('input', v.trim())
            }

            if (this.$listeners.hasOwnProperty('change')) {
              ;(this.$listeners.change as Function)(v)
            }
          },
          input: (v: string) => {
            this.$emit('input', v)
          }
        }
      },
      this.$attrs.innerSlot
        ? [
          h(
            'template',
            { slot: (this.$attrs.innerSlot as any).name },
            (this.$attrs.innerSlot as any).value
          )
        ]
        : null
    )
  }
}
</script>
